<!--  -->
<template>
  <div class="hot-order">
    <Nav title="热门活动" class="nav-container">
      <template v-slot:left>
        <span class="back-white" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="order-list-wrapper">
      <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="hotList"
        ref="myScroll"
      >
        <div>
          <hot-order :hotList.sync="hotList" @toShareReward="toShareReward"></hot-order>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
    <div class="info" v-if="showMask">
      <div class="J-weixin-tip weixin-tip">
        <div class="weixin-tip-content">请在菜单中选择分享</div>
      </div>
      <div class="btn flex justify-center aligin-center" @click="showMask=false">我知道了</div>
    </div>
  </div>
</template> 

<script>
import Nav from "../../components/Nav";
import { hotActivities } from "../../api/api";
import HotOrder from "../../components/hotOrder";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
export default {
  mixins: [Page],
  components: { Nav, Scroll, HotOrder },
  data() {
    return {
      hotList: [],
      uid: 0,
      showMask: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    _shareConfig(jsk) {
      wx.config(jsk);
      wx.ready(() => {
        wx.updateTimelineShareData({
          title: "热门活动", // 分享标题
          link: window.location.origin+window.location.pathname + "?pid=" + this.uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          success: function() {
            // 设置成功
          }
        });
        wx.updateAppMessageShareData({
          title: "热门活动", // 分享标题
          link: wwindow.location.origin+window.location.pathname + "?pid=" + this.uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          desc: "兰溪官方特色购物平台。", // 分享描述
          success: function() {
            // 设置成功
          }
        });
      });
      wx.error(res => {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    },
    toShareReward() {
      var ua = navigator.userAgent.toLowerCase();
      var isWeixin = ua.indexOf("micromessenger") != -1;
      if (isWeixin) {
        this.showMask = true;
      } else {
        this.$copyText(
         window.location.origin+window.location.pathname+ "?pid=" + this.uid,
        ).then(
          e => {
            this.$toast("复制成功！");
          },
          e => {
            this.$notify(e);
          }
        );
      }
    },
    _api() {
      hotActivities({page: this.current_page + 1}).then(({ data: { result } }) => {
        this.uid = result.uid;
        if (result.items && result.items.length != 0) {
          this.hotList = [...this.hotList, ...result.items];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    }
  },
  created() {},
  mounted() {
    this._api();

    // 分享
    if (typeof wx !="undefined") {
      this._shareConfig(res.data.result.jsk);
    }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.nav-container {
  background: #fc4018;
  color: #fff;
}
.hot-order {
  height: 100%;
  .order-list-wrapper {
    background: linear-gradient(
      13deg,
      rgba(162, 55, 182, 1),
      rgba(252, 64, 24, 1),
      rgba(252, 64, 24, 1)
    );
    height: calc(100% - 44px);
    overflow: hidden;
  }
  .loading-bottom {
    width: 100%;
    text-align: center;
  }
  .back-white {
    display: inline-block;
    height: 32px;
    width: 32px;
    background: url("../../assets/imgs/arrow-left-white.png");
    background-size: 100% 100%;
  }
}
.info {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.btn {
  color: #fff;
  margin: 10px auto;
  width: 70px;
  height: 25px;
  border-radius: 5px;
  border: 1px dashed #fff;
}
.weixin-tip-content {
  font-size: 16px;
  letter-spacing: 5px;
  font-weight: bold;
  line-height: 20px;
}
.weixin-tip {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  width: 265px;
  padding: 55px 0 0;
  margin: 0 auto;
  text-align: center;
  background: url()
    no-repeat right top;
  background-size: 45px 68px;
}

.weixin-tip-img {
  padding: 110px 0 0;
}

.weixin-tip-img::after {
  display: block;
  margin: 15px auto;
  content: " ";
  background-size: cover;
}
</style>